[FW] [Flash] FireworksとFlashの連携

Fireworksで作成したデザインをFlashで開く（またはコピーする）際の注意点について調べてみました。

FireworksとFlash間の互換性は悪くはないのですが、線の付け方や細かいエフェクト等で完全に一致しない部分があるようです。
今回は、UIデザインをする時に特に利用頻度が高そうな描画やレイヤーエフェクト（フィルター）について、FireworksとFlashを比較してみました。

1: ストロークの整列

Fireworks上で矩形を描きます。塗の色と線の太さや色を設定する際にプロパティパネルにある「ストロークの整列」で矩形のどの位置に線を描くかといった設定ができるのですが

このファイルをFlashで開いてみると

ストロークはすべて「中心」になってしまうようです。
ですので、Fireworksで描いたストロークをそのままFlashに持っていく場合は、「ストロークの整列」は「中心」を選択しておく必要があります。（Flash上で線の色、太さは変更可能）

2: 角丸の半径

角丸はどうでしょうか。
Fireworksで下のような矩形の画像を描いてみます。

これをFlashで開いてみると

一応、そのままの形を保持しているようです。ただし、一度Flashに持ってきてしまうと、角丸の調整ができません。
Flash上で一度描いた矩形の角丸半径をあとから修正するためには、その矩形が予めFlashの「矩形プリミティブツール」で描かれている必要があります。

残念ながら今のところ、Fireworksで描いた矩形をFlashに持ってきても、単純な「矩形ツール」で描かれたオブジェクトとして扱われてしまうようです。

3: 角丸図形のコーナーの潰れ

もともとFlashは角丸図形の線が綺麗に描画されないらしく（特に細めのものが）、四つのコーナーが潰れて見えてしまうという欠点があります。

ですので、Fireworksで描いたこういう画像を
Flashで開くと、↓矩形のコーナーが潰れてしまいます。
これは「線を使わず塗りだけで描画する」ことで対処できます。（図の（B）を参照）

4: ドロップシャドウ

Fireworksで作成した単純なドロップシャドウはほぼそのままFlash上にコピーされるようです。
ただし、デフォルトでFlash側の プロパティパネル＞フィルター＞ドロップシャドウ＞画質 が「低」に設定されてしまうようなので、Fireworksに限りなく近い見た目にするためにここは手動で「高」に直す必要があります。
内側のシャドウも問題はなさそうです。

5: 光彩

Fireworksの「光彩」フィルタを利用する際には注意が必要です。ご覧のとおり（下図）Fireworksで光彩フィルタに設定した値はFlashでそのまま適用されません。かろうじて「色」の値はそのまま適用することができるので、Flashに読み込んでから調整するか別の方法で描画したほうがいいでしょう。

5: テキスト

Fireworksで作成したテキストを編集可能な状態でFlash上で開くと、特に行間がずれてしまいます（図の黒い文字がFireworks、ピンクの文字がFlashで開いた時のキャプチャ。）。文字はFlash上で調整するか、パス化したものを読み込むようにしたほうがよさそうです。

Flashで開くことを前提としてFireworksでデザインをする場合は、上記のようなポイントに注意しつつ作業をしていったほうがよさそうです。